<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form size="small" :model="pageData" layout="inline">
            <a-form-item label="职务">
              <a-input :style="{ width: '200px' }" v-model="pageData.dropDownData1" class="bacClass" placeholder=""
                @press-enter="huiche"></a-input>
            </a-form-item>
          </a-form>
        </div>
        <div class="my-tool-bar">
          <Toolbar :items="pageData.btnList" @select="selectHandler"> </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!--
                        表格插件
                    -->

        <div class="w-full h-full">
          <encapsulation-agrid style="height: 100%" ref="gridOption" :configaggrid="configTable"></encapsulation-agrid>
        </div>
        <!-- <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height: 100%" :defaultColDef="defaultColDef"
        class="ag-theme-alpine" :rowData="table.dataList" :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys> -->
    </template>
    <!-- <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
      style="justify-content: center" :page-size-options="optionsList" :page-size="size" :current="page" /> -->
  </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import emitter from '@/hooks/useEventBus'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Button, Form, Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import { baseURL } from '../../api/axios.config'
import axios from 'axios'
import filedownload from 'js-file-download'
import usePermission from '@/store/modules/permission'
import PageTabelLayout from '@/components/pageTabelLayout.vue'
import MyTable from '@/components/MyTable'
import ButtonRenderer from '@/components/TableCellRenderer/ButtonRenderer'
import { template } from 'lodash'
import { setupGlobalComponent } from '@/layouts'
// 引入

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'

interface PositionList {
  companyCode: any
  code: any
  is_active: any
  company_id: any
  companyName: any
  positionCode: any
  remark: any
  sort_index: any
  update_date: any
  positionName: any
  update_user: any
  post: any
  post_type_id: any
  id: any
  create_user: any
  create_date: any
  position_id: any
}

export default {
  name: 'JobList',

  setup() {
    const optionsList: any = ref(pagingList)
    const total = ref(0)
    const page = ref(1)
    const size = ref(10)
    function PageSize(val: any) {
      page.value = val
      doRefresh()
    }
    function change1(val: any) {
      size.value = val
      doRefresh()
    }
    const headerShow = ref<boolean>(true)

    function doRefresh() {
      // pageData.pageLoading = true
      // post({
      //   url: 'org/baPosition/getPage',
      //   data: {
      //     page: page.value,
      //     size: size.value,
      //     position: pageData.dropDownData1,
      //   },
      // })
      //   .then(({ data, code }: any) => {
      //     if (code === 200) {
      //       data.list.forEach(function (o:any) {
      //         // o.updateDate
      //         // o.createDate

      //       })
      //       table.handleSuccess(data.list)
      //       // 查询方法改
      //       gridOption.value.setRowData(data.list)
      //       total.value = data.total
      //     }
      //   })
      //   .catch(console.log)
      //   .finally(() => {
      //     pageData.pageLoading = false
      //   })
      try {
          gridOption.value.setQuery({
            position: pageData.dropDownData1,
      })
        } catch (error) {
          console.log(error);
        }
    }

    const { selectedRowKeys, onSelectionChange } = useRowSelection()
    const pagination = usePagination(doRefresh)
    const table = useTable()
    const rowKey = useRowKey('id')
    const tableColumns = useTableColumn([
      {
        title: '工号',
        key: 'code',
        dataIndex: 'code',
        width: 150,
      },

      {
        title: '职务',
        key: 'position',
        dataIndex: 'position',
        width: 150,
      },
      {
        title: '备注',
        key: 'remark',
        dataIndex: 'remark',
        width: 200,
      },

      {
        title: '创建人',
        key: 'createUser',
        dataIndex: 'createUser',
        width: 150,
      },
      {
        title: '创建时间',
        key: 'createDate',
        dataIndex: 'createDate',
        width: 150,
      },
      {
        title: '修改人',
        key: 'updateUser',
        dataIndex: 'updateUser',
        width: 150,
      },
      {
        title: '修改时间',
        key: 'updateDate',
        dataIndex: 'updateDate',
        width: 200,
      },
    ])

    let tc: any[] = tableColumns.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
        width: 200,
        tooltipField: o.key,
      }

      return obj
    })

    let a = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]
    tc = a.concat(tc)
    let configTable = ref({
      url: 'org/baPosition/getPage', //接口路径
      queryData: {
        //接口参数
      },
      // isGet:true,//是否是get请求
      // isLimit:true,//后端分页接收limit而非size
      paginationShow: true, //分页是否显示
      invokeiIterface: true, //是否调用接
      rowMultiSelectWithClick: false, //点击行是否多选
      column: tc,
      fileName: 'JobList', //导出文件名
    })
    const pageData = reactive<{
      showAdd: boolean
      dropDownData: any
      nameList: []
      pageLoading: boolean
      typeList: []
      dropDownData1: any
      rHeight: any
      btnList: any[]
      isEdit: boolean
      firmList: any[]
      title: any
      companyId: any
    }>({
      nameList: [],
      showAdd: false,
      dropDownData: '',
      pageLoading: false,
      typeList: [],
      dropDownData1: '',
      rHeight: 0,
      btnList: [],
      isEdit: false,
      firmList: [],
      title: '',
      companyId: null,
    })
    onMounted(() => {
      emitter.on("refresh-JobList", () => doRefresh());

      getFrimList()
    })
    let cxbl: any = undefined
    //查询
    const selectHandler = () => {
      page.value = 1
      if (pageData.dropDownData == '') {
        cxbl = undefined
      } else {
        cxbl = pageData.dropDownData
      }
      doRefresh()
    }
    const queryData = reactive({
      clothType: '',
    })

    // 表格准备事件
    const gridOption = ref()
    // const gridReady = (params: any) => {
    //   gridOption.value = params.api
    // }

    let formRef = ref<FormInstance>()

    const handleChange = (_data: any) => {
      table.handleSuccess(_data)
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1
    }
    //拿到所有公司

    function getFrimList() {
      post({
        url: 'org/baCompany/getTreeCompanyOrDepartment',
        data: {},
      }).then((result: any) => {
        if (result.code === 200) {
          pageData.firmList = result.data
          pageData.nameList = result.data
        } else {
          Message.error(result.message)
        }
      })
    }

    const localeText1: any = ref(localeText)
    const huiche = () => {
      doRefresh()
    }
    //设置权限
    // ['查询', '新增', '删除', '导出', '导入']
    const permissionStore = usePermission()

    if (permissionStore.hasPermisson('zwlb.cx')) {

      pageData.btnList.push("查询")
    }
    return {
      huiche,
      localeText1,
      getFrimList,
      defaultColDef,
      tc,
      total,
      PageSize,
      change1,
      page,
      size,
      formRef,
      selectedRowKeys,
      pagination,
      tableColumns,
      table,
      rowKey,
      pageData,
      queryData,
      selectHandler,
      headerShow,
      handleChange,
      // gridReady,
      gridOption,
      optionsList,
      configTable
    }
  },
  components: { Toolbar, PageTabelLayout,  },
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>